<!doctype html>
<html lang="zh">

<head>
    <title>{:lang('chat')}</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="/static/index/css/mobile.css">
    <link href="/static/common/css/iconfont.css" rel="stylesheet">

    <style>
        .icon-images{
            vertical-align: middle;
            height:19px;
            width:19px;"
        }

        .icon-images .iconfont{
            font-size:19px;
        }
    </style>
</head>

<body>
<div class="chatcontainer">
    <div class="header grey12">
        <div class="ser-info">
            <div class="ser-company" id="ser-company">{:lang('and')}{$to_nick}{:lang('Customer service in the chat')}</div>
        </div>
    </div>
    <div class="qimo_content mobileChat">
        <div class="m7_content recommend_height" id="wrap">
            <ul class="conversation is_robot" id="histStart" page="1" sw="on">
                <li class="showtime none">
                    <a id="show-more" class="we_im_info">{:lang('See more news history')}</a>
                </li>
                <li class="showtime msg"></li>
            </ul>
        </div>
        <div id="recommend_arr" class="recommend_arr_moor_chat">
            <div class="recommend_center">
                <ul class="recommend_ul">
                    {foreach $comask_lists as $key=>$item}
                    <li class="recommend_li" data-id="{$key}" title="点击问题">{$item}</li>
                    {/foreach}
                </ul>
            </div>
        </div>
        <div class="association_arr none"></div>
        <div class="footer">
            <div class="face-con" id="face-con" style="display: none; top: 0px; height: 0px; width: 100%; opacity: 0.8;">
                <ul></ul>
            </div>
            <div class="msg-toolbar">
                <div id="face-btn" class="we_im_info">
                    <i class="iconfont icon-biaoqing font20"></i>
                </div>
                {if $options['set_attachment_yksc'] == 1}
                {if $options['set_attachment_tpsc'] == 1}
                <div id="image-btn" class="we_im_info">
                            <i class="iconfont icon-tupian font20"></i>
                            <div class="moxie-shim moxie-shim-html5">
                                <input type="file" id="upload_img" accept="{:get_img_accept($options['set_attachment_tpgs'])}" />
                            </div>
                        </div>
                {/if}
                {if $options['set_attachment_wjsc'] == 1}
                <div id="file-btn" class="we_im_info qnInited">
                    <i class="iconfont icon-icon- font20" id="file-btn-img"></i>
                    <div class="moxie-shim moxie-shim-html5">
                        <input type="file" id="upload_file" accept="{$options['set_attachment_wjgs']}" />
                    </div>
                </div>
                {/if}
                {/if}
                <div id="audio-btn" class="we_im_info qnInited">
                    <i class="iconfont icon-yuyin font20" id="file-btn-audio"></i>
                </div>
                <div id="appraise-btn" class="appraise-btn we_im_info">
                    <div class="qimo_tooltip none">{:lang('evaluation')}</div>
                    <i class="iconfont icon-pingjia font20"></i>
                </div>

                {if $user}
                <div class="we_im_info appraise-btn">
                    <a id="user_pay" data-original-title="会员消费">
                        <img class="icon-images" src="{$user['pay']}">
                    </a>
                </div>
                <div class="we_im_info appraise-btn">
                    <a id="user_list" data-original-title="会员消费">
                        <img class="icon-images" src="{$user['order']}">
                    </a>
                </div>
                {/if}

                {if $user_auth}
                <div class="we_im_info appraise-btn">
                    <a id="user_history_message" {if $check_auth } data-auth="{$check_auth}" {/if} class="icon-images" data-original-title="聊天记录">
                        <i class="iconfont icon-lishishuju"></i>
                    </a>
                </div>
                {/if}

            </div>
            <div class="msg-input">
                <div class="input-box">
                    <textarea id="chatbox_input" class="text grey" placeholder="{:lang('Say something')}"></textarea>
                </div>
            </div>
            <div id="fuceng" class="fuceng">
                <ul>
                    <li class="fuceng-li" id="type1" type="1">
                        <img class="layui-icon" src="/static/index/imgs/selected.png">
                        <span>{:lang('Enter Ctrl+Enter')}</span>
                    </li>
                    <li class="fuceng-li" id="type2" type="2">
                        <img class="layui-icon" src="/static/index/imgs/selected.png">
                        <span>{:lang('Ctrl+Enter Enter')}</span>
                    </li>
                </ul>
            </div>
            <div class="msg-toolbar-footer grey12">
                <div class="abs br pnl-btn">
                    <span>
                        <input type="button" value="{:lang('send')}" id="chatmsg_submit" class="we_im_info" />
                    </span>
                    <a id="showinfo" class="showinfo">
                        <img src="/static/index/imgs/up-menu.png">
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
{if $options['mess_prompt'] == 1}
<div class="hide">
    <audio id="new-chat"><source src="{$options['mess_mp3']}" type="audio/mpeg"></audio>
</div>
{/if}
<script type="text/javascript" src="/static/index/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/index/js/cookie.min.js"></script>
<script type="text/javascript" src="/static/common/js/common.js"></script>
<script type="text/javascript" src="/static/common/js/recordmp3.js"></script>
<script type="text/javascript" src="/static/common/js/faces.js"></script>
<script type="text/javascript" src="/static/index/layer_mobile/layer.js"></script>
<script type="text/javascript" src="/static/index/js/websocket.js"></script>
<script type="text/javascript" src="/static/index/js/mobile.js"></script>
<script>
    let IM_config = {
        hook:"{:url('api/Hook/index')}",
        user_pay:"{:addons_url('user://Index/pay')}",
        user_order:"{:addons_url('user://Index/queryorder')}",
        // user_auth:"{:addons_url('authusers://Index/history')}",
        user_auth:"{:url('members/Index/history')}",
        unread:"{:url('api/Unread/index')}",
    };

    miniChat.init({
        WS: "{:config('im.WS_address')}",
        ykinfo: {
            from_id: '{$fromid}',
            from_group: '{$group}',
            from_nick: '{$from_nick}',
            from_avatar: '{$from_avatar}'
        },
        kfinfo: {
            to_id: '{$toid}',
            to_group: '{$group}',
            to_nick: '{$to_nick}',
            to_avatar: '{$to_avatar}'
        }
    });

</script>
</body>

</html>
